<template>
  <Card>
    <div id="outMaterial">
      <div class="title">
        <Icon size="18" type="md-list-box"/>
        任务工资打分
        <Divider/>
      </div>
      <div class="from">
        <Form ref="form" :label-width="170" :model="form" :rules="formValidate" inline>
          <div class="fromTitle">基础信息</div>
          <FormItem label="车牌号：" prop="license_plate_num" style="width:49%;">
            <Input v-model="form.license_plate_num" disabled placeholder="请输入车牌号"/>
          </FormItem>
          <Form-item label="线路：" prop="line" style="width:49%;">
            <Input v-model="form.line" disabled placeholder=""/>
          </Form-item>
          <Form-item label="月份：" prop="date" style="width:49%;">
            <DatePicker
              v-model="form.date"
              disabled
              placeholder="请选择月份"
              placement="bottom-start"
              style="width:100%"
              type="month"
            ></DatePicker>
          </Form-item>
          <FormItem label="月收入(刷卡、投币）：" style="width:49%;">
            <Input v-model="form.monthly_income" disabled placeholder="请输入车牌号"/>
          </FormItem>
          <FormItem label="免票运量：" style="width:49%;">
            <Input v-model="form.free" disabled placeholder="请输入免票运量"/>
          </FormItem>
          <FormItem label="免票收入：" style="width:49%;">
            <Input v-model="form.free_income" disabled placeholder="请输入免票收入"/>
          </FormItem>
          <FormItem label="包车收入：" style="width:49%;">
            <Input v-model="form.contract" placeholder="请输入包车收入"/>
          </FormItem>
          <FormItem label="收入合计：" style="width:49%;">
            <Input v-model="form.income_total" disabled placeholder="请输入收入合计"/>
          </FormItem>
          <FormItem label="月公里数：" style="width:49%;">
            <Input v-model="form.monthly_km" disabled placeholder="请输入月公里数"/>
          </FormItem>
          <FormItem label="月气耗（金额）：" style="width:49%;">
            <Input v-model="form.monthly_cost" disabled placeholder="请输入月气耗（金额）"/>
          </FormItem>
          <div class="fromTitle">月加气量</div>
          <FormItem label="顺康加气量：" style="width:49%;">
            <Input v-model="form.m_air_shunkang" disabled placeholder="请输入顺康加气量"/>
          </FormItem>
          <FormItem label="逸华加气量：" style="width:49%;">
            <Input v-model="form.m_air_yihua" disabled placeholder="请输入逸华加气量"/>
          </FormItem>
          <FormItem label="合计加气量：" style="width:49%;">
            <Input v-model="form.m_air_total" disabled placeholder="请输入合计加气量"/>
          </FormItem>
          <FormItem label="增加额：" style="width:49%;">
            <Input v-model="form.air_increment" disabled placeholder="请输入增加额"/>
          </FormItem>
          <FormItem label="增加率：" style="width:49%;">
            <Input v-model="form.air_rate_show" disabled placeholder="请输入增加率"/>
          </FormItem>
          <FormItem label="增减百分比在（+－1%含）之间：" style="width:49%;">
            <Input v-model="form.air_grade_one" placeholder="请输入得分" @on-change="totalGrade"/>
          </FormItem>
          <FormItem label="节约或超过1%至3%（含）之间：" style="width:49%;">
            <Input v-model="form.air_grade_two" placeholder="请输入得分" @on-change="totalGrade"/>
          </FormItem>
          <FormItem label="节约或超过3%：" style="width:49%;">
            <Input v-model="form.air_grade_three" placeholder="请输入得分" @on-change="totalGrade"/>
          </FormItem>
          <div class="fromTitle">收入</div>
          <FormItem label="增加额：" style="width:49%;">
            <Input v-model="form.income_increment" disabled placeholder="请输入增加额"/>
          </FormItem>
          <FormItem label="增加率：" style="width:49%;">
            <Input v-model="form.income_rate_show" disabled placeholder="请输入增加率"/>
          </FormItem>
          <FormItem label="增减百分比在（+－1%含）之间：" style="width:49%;">
            <Input v-model="form.income_grade_one" placeholder="请输入得分" @on-change="totalGrade"/>
          </FormItem>
          <FormItem label="节约或超过1%至3%（含）之间：" style="width:49%;">
            <Input v-model="form.income_grade_two" placeholder="请输入得分" @on-change="totalGrade"/>
          </FormItem>
          <FormItem label="节约或超过3%：" style="width:49%;">
            <Input v-model="form.income_grade_three" placeholder="请输入得分" @on-change="totalGrade"/>
          </FormItem>
          <div class="fromTitle">交通事故</div>
          <FormItem label="交通事故（次责及以上）：" style="width:49%;">
            <Input v-model="form.traffic_grade_one" placeholder="请输入次数" @on-change="totalGrade"/>
          </FormItem>
          <FormItem label="标准分值：" style="width:49%;">
            <Input v-model="form.traffic_grade_two" placeholder="请输入标准分值" @on-change="totalGrade"/>
          </FormItem>
          <FormItem label="次责及以上交通事故：" style="width:49%;">
            <Input v-model="form.traffic_grade_three" placeholder="请输入次数" @on-change="totalGrade"/>
          </FormItem>
          <FormItem label="全责致人重伤或死亡的交通事故：" style="width:49%;">
            <Input v-model="form.traffic_grade_four" placeholder="请输入次数" @on-change="totalGrade"/>
          </FormItem>
          <div class="fromTitle">公里数</div>
          <FormItem label="增加额：" style="width:49%;">
            <Input v-model="form.mileage_increment" disabled placeholder="请输入增加额"/>
          </FormItem>
          <FormItem label="增加率：" style="width:49%;">
            <Input v-model="form.mileage_rate_show" disabled placeholder="请输入增加率"/>
          </FormItem>
          <FormItem label="增减百分比在（+－1%含）之间：" style="width:49%;">
            <Input v-model="form.mileage_grade_one" placeholder="请输入得分" @on-change="totalGrade"/>
          </FormItem>
          <FormItem label="节约或超过1%至3%（含）之间：" style="width:49%;">
            <Input v-model="form.mileage_grade_two" placeholder="请输入得分" @on-change="totalGrade"/>
          </FormItem>
          <FormItem label="节约或超过3%：" style="width:49%;">
            <Input v-model="form.mileage_grade_three" placeholder="请输入得分" @on-change="totalGrade"/>
          </FormItem>
          <div class="fromTitle">总计</div>
          <FormItem label="分数合计：" style="width:49%;">
            <Input v-model="form.total_grade" placeholder="请输入分数合计" readonly/>
          </FormItem>
          <FormItem label="排名：" style="width:49%;">
            <Input v-model="form.ranking" placeholder="请输入排名"/>
          </FormItem>
          <FormItem label="奖惩金额：" style="width:49%;">
            <Input v-model="form.reward_punish" placeholder="请输入排名"/>
          </FormItem>
          <FormItem label="备注：" style="width:49%;">
            <Input v-model="form.remarks" placeholder="请输入备注" type="textarea"/>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button :loading="loading" @click="cancel('form')">重置</Button>
          <Button
            :loading="submitLoading"
            style="margin-left:8px"
            type="primary"
            @click="handleSubmit('form')"
          >保存
          </Button>
        </div>
      </div>
    </div>
  </Card>
</template>
<script>
import {editTaskDalary, taskDalaryInfo} from '../../api/taskSalary'

export default {
  data() {
    return {
      submitLoading: false,
      loading: false,
      form: {},
      formValidate: {}
    }
  },
  watch: {
    $route: 'getTaskDalaryInfo'
  },
  mounted() {
    this.getTaskDalaryInfo()
  },
  methods: {
    cancel() {
      this.form = {}
    },
    getTaskDalaryInfo() {
      if (this.$route.params.id) {
        this.loading = true
        taskDalaryInfo({id: this.$route.params.id}).then(res => {
          this.loading = false
          this.form = res.data.result
        })
      }
    },
    handleSubmit(name) {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.id = this.$route.params.id
          this.submitLoading = true
          editTaskDalary(this.form).then(res => {
            this.submitLoading = false
            if (res.data) {
              this.$Message.success(res.message)
              this.$store.commit('closeTag', 'editSalaryAccounting')
              this.$router.push({
                name: 'salaryAccounting'
              })
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    totalGrade() {
      const air_grade_one = this.form.air_grade_one ? this.form.air_grade_one : 0
      const air_grade_two = this.form.air_grade_two ? this.form.air_grade_two : 0
      const air_grade_three = this.form.air_grade_three
        ? this.form.air_grade_three
        : 0
      const income_grade_one = this.form.income_grade_one
        ? this.form.income_grade_one
        : 0
      const income_grade_two = this.form.income_grade_two
        ? this.form.income_grade_two
        : 0
      const income_grade_three = this.form.income_grade_three
        ? this.form.income_grade_three
        : 0
      const traffic_grade_one = this.form.traffic_grade_one
        ? this.form.traffic_grade_one
        : 0
      const traffic_grade_two = this.form.traffic_grade_two
        ? this.form.traffic_grade_two
        : 0
      const traffic_grade_three = this.form.traffic_grade_three
        ? this.form.traffic_grade_three
        : 0
      const traffic_grade_four = this.form.traffic_grade_four
        ? this.form.traffic_grade_four
        : 0
      const mileage_grade_one = this.form.mileage_grade_one
        ? this.form.mileage_grade_one
        : 0
      const mileage_grade_two = this.form.mileage_grade_two
        ? this.form.mileage_grade_two
        : 0
      const mileage_grade_three = this.form.mileage_grade_three
        ? this.form.mileage_grade_three
        : 0
      this.form.total_grade =
        parseInt(air_grade_one) +
        parseInt(air_grade_two) +
        parseInt(air_grade_three)
      this.form.total_grade +=
        parseInt(income_grade_one) +
        parseInt(income_grade_two) +
        parseInt(income_grade_three)
      this.form.total_grade +=
        parseInt(traffic_grade_one) +
        parseInt(traffic_grade_two) +
        parseInt(traffic_grade_three) +
        parseInt(traffic_grade_four)
      this.form.total_grade +=
        parseInt(mileage_grade_one) +
        parseInt(mileage_grade_two) +
        parseInt(mileage_grade_three)
    }
  }
}
</script>
<style>
.ivu-row .ivu-col .ivu-form-item {
  width: 100%;
}
</style>
